<template>
    <div class="warrper">
        <div class="btn1"></div>
        <div class="btn2"></div>
        <div class="btn3" @click="handleClick()"></div>
        <div class="menu-layer m1">
            <div 
            class="item"
            v-for="(item,index) of menu1"
            :key="index"
            >
                <img :src="item.imageUrl">
                <span>{{item.name}}</span>
                <div class="controll">
                    <span @click="reduce(item.id, 1)"> - </span>
                    <span>{{item.nums}}</span>
                    <span @click="add(item.id, 1)"> + </span>
                </div>
            </div>           
        </div>
        <div class="menu-layer m2">
            <div 
            class="item"
            v-for="(item,index) of menu2"
            :key="index"
            >
                <img :src="item.imageUrl">
                <span>{{item.name}}</span>
                <div class="controll">
                    <span @click="reduce(item.id, 2)"> - </span>
                    <span>{{item.nums}}</span>
                    <span @click="add(item.id, 2)"> + </span>
                </div>
            </div>           
        </div> 
        <div class="scrim" ref="popblock" style="display: none">
            <div class="form-layer">
                <div class="input-area i2">
                    <input type="tel" v-model="mobile" placeholder="电话">
                </div>
                <div class="input-area i3">
                    <input type="number" v-model="vericode" placeholder="验证码">
                    <div class="vericode" :class="{'canClick': canClick}" @click="sendVericode">{{vericodeTxt}}</div>
                </div>
                <div class="btn" @click="subClick"></div>           
            </div>            
        </div>       
    </div>
</template>
<script>
import request from "@/utils/request";
import { MessageBox } from "mint-ui";
import Qs from "qs";
import utils from "@/utils/utils";
export default {
    data(){
        return {
            menu1: [],
            menu2: [],
            orderlist: [],
            vericodeTxt: "发送验证码",
            mobile: "",
            vericode: "",  
            canClick: true,      
        }
    },
    methods:{
        handleClick() {
            this.menu1.forEach(item => {
                if(item.nums > 0) {
                    for (let i = 0; i < item.nums; i++) {
                        this.orderlist.push(item.id)
                    }
                }
            });
            this.menu2.forEach(item => {
                if(item.nums > 0) {
                    for (let i = 0; i < item.nums; i++) {
                        this.orderlist.push(item.id)
                    }
                }
            });
            if(this.orderlist.length < 1) {
                return MessageBox.alert("请选择饮品或茶点", "提示");
            }
            let query = Qs.parse(location.search.substring(1));
            if(query.mobile && query.mobile != "null") {
                this.submitOrder();
            } else {
                this.$refs.popblock.style.display = "block";
            }
        },
        submitOrder() {
            const _this = this;
            let params = {};
            let query = Qs.parse(location.search.substring(1));
            params.goodsIds = _this.orderlist;
            params.openid = query.openid;
            params.projectId = query.proejctId;
            params.position = query.position;
            if(_this.mobile && _this.vericode) {
                params.mobile = _this.mobile;
                params.code = _this.vericode;
            }
            request
                .post('http://robot.ttrsznkj.com/yq-api/robot/logic/order', params)
                .then(response => {
                    if(response.code === 0) {
                        _this.mobile = '';
                        _this.vericode = '';
                        MessageBox.alert("点餐成功，取餐编号：" + response.data, "提示");
                        window.android.orderComplete();
                    }
                });            
        },
        reduce(id, type) {
            if(type == 1) {
                this.menu1 = this.reloadData(this.menu1, id, 'reduce');
            }
            if(type == 2) {
                this.menu2 = this.reloadData(this.menu2, id, 'reduce');
            }
        },
        add(id, type) {
            if(type == 1) {
                this.menu1 = this.reloadData(this.menu1, id, 'add');
            }
            if(type == 2) {
                this.menu2 = this.reloadData(this.menu2, id, 'add');
            }
        },
        reloadData(list, id, type) {
            return list = list.map(item => {
                if(item.id === id) {
                    if(type == 'add') {
                        item.nums++;
                    }
                    if(type == 'reduce' && item.nums > 0) {
                        item.nums--;
                    }
                }
                return item;
            });
        },
        sendVericode() {
            const _this = this;
            let query = Qs.parse(location.search.substring(1));
            if (!_this.canClick) {
                return;
            }
            if (!_this.mobile) {
                MessageBox.alert("电话号码不能为空", "提示");
            } else {
                if (utils.isMobile(_this.mobile)) {
                request
                    .get(
                    'http://robot.ttrsznkj.com/yq-api/robot/logic/getMobileVerifyCode',
                    {
                        openid: query.openid,
                        mobile: _this.mobile
                    },
                    {
                        mask: true
                    }
                    )
                    .then(response => {
                    MessageBox.alert(
                        "验证码已通过短信发送到您的手机，稍等一会儿哦",
                        "提示"
                    );
                    _this.canClick = false;
                    _this.startVericodeInterval();
                    });
                } else {
                    MessageBox.alert("请输入正确的手机号", "提示");
                }
            }
        },
        startVericodeInterval() {
            const _this = this;
            let num = 60;
            let tmp = setInterval(function() {
                _this.vericodeTxt = `${num}秒后重新获取`;
                num--;
                if (num == 0) {
                    _this.vericodeTxt = "发送验证码";
                    _this.canClick = true;
                    clearInterval(tmp);
                }
            }, 1000);
        },
        subClick() {
            const _this = this;
            if(!_this.mobile || !_this.vericode) {
                return MessageBox.alert("请输入电话和验证码", "提示");
            }
            _this.$refs.popblock.style.display = "none";
            _this.submitOrder();
        }
    },
    mounted(){
        const _this = this;
        request
            .get('http://robot.ttrsznkj.com/yq-api/robot/logic/goodsList?projectId=1', {
            })
            .then(response => {
                if(response.code === 0) {
                    response.data.forEach(item => {
                        item.nums = 0;
                        if(item.type === 1) {
                            _this.menu1.push(item);
                        }
                        if(item.type === 2) {
                            _this.menu2.push(item);
                        }
                    });
                        console.log(_this.menu1,_this.menu2);                    
                } else {
                    MessageBox.alert("无法获取数据", "提示");
                }
            });
    }
}
</script>
<style lang = "stylus" scoped >
.warrper
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 0
    background: url('http://rs.static.quanc.com.cn/201904271400/bg.jpeg') repeat center center
    background-size: 100% 100%
.btn1
    position absolute
    top 19%
    left 50%
    margin-left -.9rem
    width 1.8rem
    height .5rem
    background: url('http://rs.static.quanc.com.cn/201904271400/btn1.png') repeat center center
    background-size: 100% 100%  
.btn2
    position absolute
    top 49%
    left 50%
    margin-left -.9rem
    width 1.8rem
    height .5rem
    background: url('http://rs.static.quanc.com.cn/201904271400/btn2.png') repeat center center
    background-size: 100% 100% 
.btn3
    position absolute
    bottom 28%
    left 50%
    margin-left -.9rem
    width 1.8rem
    height .5rem
    background: url('http://rs.static.quanc.com.cn/201904271400/btn3.png') repeat center center
    background-size: 100% 100%  
.menu-layer
    width 86%
    margin 0 auto 
    &.m1
        margin-top 44%
    &.m2
        margin-top 97%
    .item
        display: flex
        align-items: center
        width 50%
        float left
        height .6rem
        > img 
            display block
            width .35rem
            height .38rem
            margin 0 0.1rem
        > span 
            display block
            flex 1
            font-size .24rem
    .controll
        width .84rem
        border 1px solid #999
        display: flex
        align-items: center        
        > span 
            display block
            flex 1
            text-align center
            color #999
            line-height .32rem
            font-size .36rem
            &:nth-child(2)
                font-size .2rem
                border-left: 1px solid #999
                border-right: 1px solid #999
.scrim
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 0
    background: rgba(0,0,0,0.7)
    .form-layer
        position absolute
        left 10%
        right 10%
        top 40%
        height 2.8rem
        background #fff
        padding 0 .5rem
        .input-area
            width 100%
            margin-top 0.2rem
            display flex
            justify-content center
            position relative
            &.i2
                background: url('http://rs.static.quanc.com.cn/jbweb/zc/icon1.png') no-repeat left center
                background-size: .26rem .26rem
            &.i3
                background: url('http://rs.static.quanc.com.cn/jbweb/zc/icon4.png') no-repeat left center
                background-size: .26rem .26rem
        .vericode
            width 1.8rem 
            height .4rem
            text-align center
            font-size .22rem
            line-height .4rem
            color #666 
            border-radius 6px
            background #E6E6E6
            position absolute
            right 0
            bottom 0.05rem
            &.canClick
                color #9B733B 
                background linear-gradient(to right, #D3A250, #E8CC89)
        input 
            flex 1
            display block
            height .45rem
            border-bottom 1px solid #956A13
            font-size 0.28rem
            color #956A13
            line-height .45rem
            width 100%
            background transparent
            padding-left 0.3rem 
        .btn
            width 3.2rem 
            height .58rem
            background: url('http://rs.static.quanc.com.cn/jbweb/zc/btn.png') no-repeat center center
            background-size: 100% 100%
            margin .4rem auto 
</style>


